<template>
  <div>


    <div class="mt_30  itemBox_jp" style="width: 100%;margin-bottom: 30px; " v-if="!this.ckxq_id">
      <!-- <div @mouseover="toggleActive(index, true)" @mouseout="toggleActive(index, false)" :class="{ item_ac: isActive[index] }" class="item row  space-between cursor" @click="toUrlc('/job/details/',item.id)" v-for="(item, index) in JobList" :key="index"> -->
      <div @mouseover="toggleActive(index, true)" @mouseout="toggleActive(index, false)" :class="{ item_ac: isActive[index] }"  @click="ckxq(item)" class="item row  space-between cursor" v-for="(item, index) in JobList" :key="index">
        <div class="column">
          <div class="f_22 f_bold">{{item.title}}</div>
          <div class="f_16 mt_20" style="color: #9E9E9E;">{{item.years_working}} | {{item.education}}</div>

          <div class="mt_20">
            <div class="fl center" v-for="(item_t, index) in item.welfare">
              {{item_t}}
            </div>
          </div>

          <div class="row_a_c mt_20" v-if="item.company">
            <div class="mr_10" >
              <img style="width: 48px;height: 48px;" :src="item.company.picture" />
            </div>
            <div>
              <div class="f_19 f_bold" style="color: #666666;">{{item.company.title}}</div>

              <div>{{item.company.type}} |
                <span v-if="item.company.is_financing==0">不需要融资</span>
                <span v-else>需要融资</span>
                | {{item.company.type}}
              </div>

            </div>
          </div>
        </div>

        <div class="f_22 f_bold mt_10" style="color: #FF752A;">{{item.salary}}</div>
      </div>
    </div>

    <JobDetails @fanghui="fanghui" v-else :jobInfo="info"></JobDetails>



  </div>


</template>

<script>
  import * as Job from "@/api/operation/job";
  import JobDetails from "@/views/center/jobDetails";

  export default {
    name: 'job',

    components: {
      JobDetails
    },
    data() {
      return {
        ckxq_id: '',
        info: {}, //任务详情
        isActive: [],
        JobList: [], //职位列表
        new_how: 1, // 1全部 2最新 3最热
      }
    },
    created() {
      this.getJobList();
    },


    mounted() {

    },



    methods: {

      ckxq(item) {
        console.log('item', item)
        this.info = item;
        this.ckxq_id = 1;
      },
      //子组件调用 返回
      fanghui() {
        this.ckxq_id = '';
      },
      toggleActive(index, isActive) {
        this.$set(this.isActive, index, isActive);
      },

      /** 查询职位列表 */
      getJobList() {
        this.loading = true;
        var per = {
          new_how: this.new_how
        };
        Job.List(per).then((response) => {
          this.JobList = response.data.rows;
          this.loading = false;
        });
      },
      toUrl(url) {
        this.$router.push({
          path: url
        })
      },
      toUrlc(url, id) {
        this.$router.replace({
          path: url,
          query: {
            id: id,
          }
        })
      },
    }
  }
</script>


<style lang="scss" scoped>
  .el-footer {
    padding: 0px;
  }

  .el-header {
    height: 70px !important;
    padding: 0px !important;

  }



  .bg-purple-b {
    min-height: 550px;
    background: #F9F9F9;
    border-radius: 20px;
    padding: 35px;
    margin-bottom: 30px;
  }


  .act {
    position: relative;
    white-space: nowrap;
    width: 100px;
    height: 40px;

    border-radius: 20px;
    font-size: 18px;

    font-weight: bold;
    color: #000000 !important;
    margin-right: 20px;


  }

  .act::after {
    bottom: -25px;
    position: absolute;
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background: #000 !important;
  }

  .wxa {

    white-space: nowrap;
    width: 100px;
    height: 40px;
    font-size: 18px;

    font-weight: bold;
    color: #979797;
    margin-right: 40px;
  }

  .cqaimg {
    width: 340px;
    height: 240px;
  }


  .itemBox_jp {
    width: auto;
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      width: 32.5%;
      height: 240px;
      // text-align: center;
      margin-bottom: 25px;
      padding: 20px;




      background: #FFFFFF;
      border: 1px solid #EAEAEA;
      border-radius: 12px;


      .leftts {
        text-align: left;
      }
    }

    .item_ac {
      box-shadow: 0px 5px 20px 1px rgba(26, 76, 176, 0.45);
    }

    /* 如果最后一行是3个元素 */
    .item:last-child:nth-child(3n - 1) {
      margin-right: calc(32.6% + 3% / 3);
    }

    /* 如果最后一行是2个元素 */
    .item:last-child:nth-child(3n - 2) {
      margin-right: calc(65% + 6% / 3);
    }
  }

  .fl {
    width: 70px;
    height: 30px;
    background: #DFF3FF;
    font-size: 15px;

    font-weight: 400;
    color: #666666;
    margin-right: 10px;
  }
</style>
